<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐购首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/purchase/index1.min.css?v=<%=$version%>">
</head>
<body>
<div id="purchaseIndex" v-cloak>
    <template>
        <purchase-header isnav="1" :number="1"></purchase-header>
    </template>
    <aside class="purchase-slider">
        <template>
            <basic-slide :list="mainList.carousels"></basic-slide>
        </template>
    </aside>
    <div class="purchase-top clearfix">
        <div class="purchase-topLeft">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="topLeft-title">
                            <h6>乐享特价</h6>
                            <p>乐看兑换币专享</p>
                        </div>
                        <img src="/imgs/purchase/index/ps.png" class="swiper-lazy">
                        <div class="topLeft-money">
                            <span class="purchase-sxb">生鲜币&nbsp;×&nbsp;</span>
                            <strong>2100</strong>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="purchase-topRight">
            <div class="topRight-list" v-for="item in  mainList.specials">
                <div>
                    <h6>{{item.title}}</h6>
                    <p>{{item.subtitle}}</p>
                </div>
                <img :src="item.imgSrc" class="lazy">
            </div>
        </div>
    </div>
    <div class="purchase-bursting">
        <div class="purchase-title clearfix">
            <span class="purchase-titleLeft"></span>
            <a class="purchase-more2" href="/purchase/bursting"></a>
        </div>
        <div class="bursting-cent">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"  v-for="item in mainList.luckyBursts" @click="getNext(4,item.productId)">
                        <div class="slide-img">
                            <img :src="item.imgSrc" class="swiper-lazy">
                            <div class="slide-speed"><span :style="{'width':+item.percentage+'%'}"></span></div>
                        </div>
                        <h6>{{item.title}}</h6>
                        <span class="purchase-mons">{{item.activityPrice}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="purchase-secKill">
        <div class="purchase-title clearfix">
            <span class="purchase-titleLeft"></span>
            <div class="secKill-data">
                <strong>{{seckillsList.beginDate}}点场</strong>
                <span>{{hours}}</span>:<span>{{minutes}}</span>:<span>{{seconds}}</span>
            </div>
            <a class="purchase-more2" href="/purchase/secondKill"></a>
        </div>
        <div class="secKill-cent clearfix">
            <div class="secKill-centImg">
                <img :src="seckillsList.imgSrc" class="lazy">
                <div class="slide-speed"><span :style="{'width':+seckillsList.percentage+'%'}"></span></div>
            </div>
            <div class="secKill-centRight">
                <h6>{{seckillsList.title}}</h6>
                <p>{{seckillsList.subtitle}}</p>
                <div class="secKill-money">
                    <strong>秒杀价</strong><span class="purchase-mons">{{seckillsList.activityPrice}}</span>
                    原价<del class="purchase-mong">{{seckillsList.integral}}</del>
                </div>
                <strong class="secKill-sold">已售{{100-seckillsList.percentage}}%</strong>
                <a class="secKill-btn" @click="getNext(3,seckillsList.productId)">立即抢购</a>
            </div>
        </div>
    </div>
    <div class="purchase-discount">
        <div class="purchase-title clearfix">
            <span class="purchase-titleLeft"></span>
            <a class="purchase-more2" href="/purchase/discount"></a>
        </div>
        <div class="discountCent clearfix">
            <a class="discount-list" @click="getNext(2,item.productId)" v-for="item in mainList.discounts" :style="bgimg(item.imgSrc)">
                <h6>{{item.title}}</h6>
                <p>当前<span>{{item.discount}}</span>折</p>
                <p><span>{{item.people}}</span>万人在拼折扣</p>
            </a>
        </div>
    </div>
    <div class="purchase-home" v-for="item in mainList.categorys">
        <div class="purchase-title clearfix">
            {{item.categoryName}}
            <span class="purchase-more2"></span>
        </div>
        <div class="purchase-homeImg"><img :src="item.imgSrc" class="lazy"></div>
        <div class="purchase-homeCent clearfix">
            <div class="homeCent-left">
                <a class="homeCent-leftTop" v-if="item.products[0]" :href="'/purchase/goodsDetails?type=1&productId='+item.products[0].productId">
                    <h6>{{item.products[0].title}}</h6>
                    <p>{{item.products[0].subtitle}}</p>
                    <img :src="item.products[0].imgSrc" class="lazy">
                </a>
                <a class="homeCent-leftButt" v-if="item.products[3]" :href="'/purchase/goodsDetails?type=1&productId='+item.products[3].productId">
                    <div>
                        <h6>{{item.products[3].title}}</h6>
                        <p>{{item.products[3].subtitle}}</p>
                    </div>
                    <img :src="item.products[3].imgSrc" class="lazy">
                </a>
            </div>
            <div class="homeCent-right">
                <a class="homeCent-rightTop" v-if="item.products[1]" :href="'/purchase/goodsDetails?type=1&productId='+item.products[1].productId">
                    <h6>{{item.products[1].title}}</h6>
                    <p>{{item.products[1].subtitle}}</p>
                    <img :src="item.products[1].imgSrc" class="lazy">
                </a>
                <a class="homeCent-rightCent" v-if="item.products[2]" :href="'/purchase/goodsDetails?type=1&productId='+item.products[2].productId">
                    <h6>{{item.products[2].title}}</h6>
                    <p>{{item.products[2].subtitle}}</p>
                    <img :src="item.products[2].imgSrc" class="lazy">
                </a>
                <a class="homeCent-rightButt" v-if="item.products[4]" :href="'/purchase/goodsDetails?type=1&productId='+item.products[4].productId">
                    <div>
                        <h6>{{item.products[4].title}}</h6>
                        <p>{{item.products[4].subtitle}}</p>
                    </div>
                    <img :src="item.products[4].imgSrc" class="lazy">
                </a>
            </div>
        </div>
    </div>
    <footer-view :number="2"></footer-view>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/js/purchase/index1.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".purchase-slider .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper2 = new Swiper(".purchase-topLeft .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        // lazyLoading : true,
        // lazyLoadingInPrevNext : true,
        // lazyLoadingInPrevNextAmount : 2,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper = new Swiper('.bursting-cent .swiper-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>